<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item :to="{ path: '/teachingManage/teachingLibraries' }">
                <i class=" el-icon-coin"></i>
                教学库管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{statusValue}}
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <el-form
                ref="jiaoxuekuForm"
                :model="filterForm"
                label-width="100px"
                :rules="jiaoxuekuRules"
            >
                <el-row class="row-padding-bottom">
                    <el-col :span="6">
                        <el-form-item
                            label="序号"
                            prop="id"
                        >
                            <el-input
                                v-model="filterForm.id"
                                placeholder="无需填写，系统默认"
                                class="input-form"
                                size="mini"
                                disabled
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item
                            label="教学库编号"
                            prop="teachingLibrariesNumber"
                        >
                            <el-input
                                v-model.trim="filterForm.teachingLibrariesNumber"
                                placeholder="请输入教学库编号"
                                class="input-form"
                                size="mini"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="创建时间">
                            <el-date-picker
                                v-model="filterForm.createTime"
                                type="datetime"
                                placeholder="请选择创建时间"
                                size="mini"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @blur="compareCreateTimeStart"
                                class="picker-form"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间">
                            <el-date-picker
                                v-model="filterForm.teachingLibrariesEndTime"
                                type="datetime"
                                placeholder="请选择结束时间"
                                size="mini"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @blur="compareCreateTimeEnd"
                                class="picker-form"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="教学负责人"
                            prop="usersIds"
                        >

                            <el-select
                                v-model="filterForm.usersIds"
                                multiple
                                placeholder="请选择教学负责人"
                                clearable
                                size="mini"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in usersIdsList"
                                    :key="item.scanId"
                                    :label="item.scanName"
                                    :value="item.scanId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="教学库名称"
                            prop="teachingLibrariesName"
                        >
                            <el-input
                                v-model.trim="filterForm.teachingLibrariesName"
                                placeholder="请输入教学库名称"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="row-padding-bottom">
                    <el-col :span="24">
                        <el-form-item
                            label="备注"
                            prop="teachingLibrariesRemark"
                        >
                            <el-input
                                v-model="filterForm.teachingLibrariesRemark"
                                placeholder="请输入备注"
                                type="textarea"
                                size="mini"
                                autosize
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                        :span="2"
                        :offset="8"
                    >
                        <el-form-item>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="save"
                            >保存</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { vxRule } from '@/client/libs/validator';
export default {
    name: 'createTeachingLibraries',
    data() {
        return {
            // 图片服务器地址
            imageServiceURL: process.env.ImageServiceURL,
            // 图片服务器上传地址
            imageServiceUploadURL: `${process.env.ImageServiceURL}/upload`,
            biopsyResearchLibrariesId:
                this.$route.query.biopsyResearchLibrariesId,
            statusValue: '',
            filterForm: {
                id: null,
                teachingLibrariesNumber: '',
                teachingLibrariesName: '',
                teachingLibrariesRemark: '',
                usersIds: [],
                createTime: '',
                teachingLibrariesEndTime: '',
            },
            usersIdsList: [],
            jiaoxuekuRules: {
                teachingLibrariesName: [
                    vxRule(true, '', 'blur', '请输入教学库名称'),
                ],
                teachingLibrariesNumber: [
                    vxRule(true, '', 'blur', '请输入教学库编号'),
                ],
                usersIds: [vxRule(true, null, 'blur', '请输入教学负责人')],
            },
        };
    },
    mounted() {
        if (this.biopsyResearchLibrariesId == null) {
            this.statusValue = '创建';
        } else {
            this.statusValue = '编辑';
            this.filterForm.id = this.biopsyResearchLibrariesId;
            this.getResearchLibrariesInfo(this.biopsyResearchLibrariesId);
        }
        this.getUsers();
    },
    computed: {},
    methods: {
        shijiancuo(timeVal) {
            return new Date(Date.parse(timeVal.replace(/-/g, '/'))).getTime();
        },
        compareCreateTimeStart() {
            if (
                this.filterForm.teachingLibrariesEndTime != '' &&
                this.shijiancuo(this.filterForm.teachingLibrariesEndTime) <
                    this.shijiancuo(this.filterForm.createTime)
            ) {
                this.$message.warning('结束时间应该大于创建时间');
                this.filterForm.createTime = '';
            }
        },
        compareCreateTimeEnd() {
            if (
                this.filterForm.teachingLibrariesEndTime != '' &&
                this.shijiancuo(this.filterForm.teachingLibrariesEndTime) <
                    this.shijiancuo(this.filterForm.createTime)
            ) {
                this.$message.warning('结束时间应该大于创建时间');
                this.filterForm.teachingLibrariesEndTime = '';
            }
        },

        getResearchLibrariesInfo(pId) {
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/TeachingLibraries/get/by/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    Object.keys(this.filterForm).forEach((item) => {
                        this.filterForm[item] = res.data.data[item];
                    });
                    this.filterForm.usersIds = [];
                    res.data.data.users.forEach((item) => {
                        this.filterForm.usersIds.push(item.id);
                    });
                }
            });
        },

        save() {
            if (this.filterForm.id == null) {
                if (this.filterForm.teachingLibrariesNumber === '') {
                    this.$message.warning('教学库编号不能为空');
                } else if (this.filterForm.teachingLibrariesName === '') {
                    this.$message.warning('教学库名称不能为空');
                } else if (this.filterForm.usersIds.length === 0) {
                    this.$message.warning('教学负责人不能为空');
                } else {
                    //创建
                    this.$axios({
                        method: 'PUT',
                        url: '/PROXY-Remote/TeachingLibraries/save',
                        data: this.filterForm,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('保存成功');
                            this.$router.push(
                                '/teachingManage/teachingLibraries'
                            );
                        }
                    });
                }
            } else {
                if (this.filterForm.teachingLibrariesNumber === '') {
                    this.$message.warning('教学库编号不能为空');
                } else if (this.filterForm.teachingLibrariesName === '') {
                    this.$message.warning('教学库名称不能为空');
                } else if (this.filterForm.usersIds.length === 0) {
                    this.$message.warning('教学负责人不能为空');
                } else {
                    //编辑
                    this.$axios({
                        method: 'POST',
                        url: '/PROXY-Remote/TeachingLibraries/update',
                        data: this.filterForm,
                    }).then((res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('更新成功');
                            this.$router.push(
                                '/teachingManage/teachingLibraries'
                            );
                            this.filterForm.id == null;
                        }
                    });
                }
            }
        },

        getUsers() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/users/searchUserIdAndName/forBiopsyResearchLibraries',
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.usersIdsList = res.data.data;
                }
            });
        },
    },
};
</script>

<style scoped>
.row-padding-bottom {
    padding-bottom: 10px;
}
</style>